<template>
  <div class="home">
    <!-- 顶部文案 -->
    <div class="my_tit">
      <h1>UiDome</h1>
      <p>本Dome使用<a href="https://cn.vuejs.org/guide/quick-start.html">Vue3</a>、<a
          href="https://vant-ui.github.io/vant/#/zh-CN/home">Vant3</a>。</p>
    </div>
    <!-- ./ 顶部文案 here -->

    <!-- 单元格（商城） -->
    <van-cell-group title="商城" :border="false" class="my_cell_group">
      <van-cell title="首页" icon="wap-home-o" is-link to="shop-home" />
      <van-cell title="分类" icon="apps-o" is-link to="shop-class" />
      <van-cell title="购物车" icon="cart-o" is-link to="shop-buys" />
      <van-cell title="我的" icon="user-o" is-link to="shop-ours" />
    </van-cell-group>
    <!-- ./ 单元格（商城） end here -->

    <!-- 九宫格（移动） -->
    <div class="van-cell-group__title">移动</div>
    <van-grid :column-num="4" class="my_grid_group">
      <van-grid-item icon="wap-home" text="首页" to="mb-home" />
      <van-grid-item icon="bars" text="分类" to="mb-class" />
      <van-grid-item icon="bookmark" text="权益" to="mb-equity" />
      <van-grid-item icon="manager" text="我的" to="mb-ours" />
    </van-grid>
    <!-- ./ 九宫格（移动）end here -->

  </div>
</template>


<script>

</script>

<style lang="less">
/* 顶部文案 */
.my_tit {
  margin: var(--van-cell-group-inset-padding);
  h1 {
    margin-bottom: 0;
    color: var(--van-black);
  }
  p {
    font-size: var(--van-cell-font-size);
    line-height: var(--van-cell-line-height);
    margin-top: 8px;
    margin-bottom: 0;
  }
  p a {
    text-decoration: underline;
  }
}
/* ./ 顶部文案 end here */


/* 单元格（商城） */
.my_cell_group {
  margin: var(--van-cell-group-inset-padding);
  border: none;
  background: transparent;
  .van-cell {
    border-radius: var(--van-cell-group-inset-border-radius);
    margin-bottom: 12px;
  }

  .van-cell:after {
    border-bottom: none;
  }

}
/* ./ 单元格（商城） end here */

/* 九宫格（移动） */
.my_grid_group {
  margin: var(--van-cell-group-inset-padding);
  border-radius: var(--van-cell-group-inset-border-radius);
  overflow: hidden;
}

/* ./ 九宫格（移动） end here */
</style>